﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/script/pack/zui/css/zui.min.css" rel="stylesheet" />
    <link href="/script/pack/zui/css/zui-theme.min.css" rel="stylesheet" />
    <script src="/script/jquery.min.js"></script>
    <script src="/script/art/template-web.js"></script>
</head>
<body>
    <div id="form" class="hide"></div>
</body>
</html>
<script type="text/html" id="tp-form">
    <div class="form-group">
        <label>账号</label>
        <input type="text" class="form-control" value="{{Name}}" placeholder="电子邮件/手机号/用户名">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <div class="col-sm-offset-2 col-sm-10">
            <select class="form-control">
                {{each inintSelect item}}
                {{if select==item.value}}
                <option value="{{item.value}}" selected>{{item.text}}</option>
                {{else}}
                <option value="{{item.value}}">{{item.text}}</option>
                {{/if}}
                {{/each}}
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div>
                <label class="radio-reset">
                    <input type="radio" name="n" value="{{state}}" {{if state==1}} checked {{/if}}><span>单选1</span>

                </label>
                <label class="radio-reset">
                    <input type="radio" name="n" value="{{state}}" {{if state==2}} checked {{/if}}><span>单选2</span>
                </label>
                <label class="radio-reset">
                    <input type="radio" name="n" value="{{state}}" {{if state==3}} checked {{/if}}><span>单选3</span>
                </label>
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</script>

<script src="/script/layer/layer.min.js"></script>
<script src="/script/lib.js"></script>
<script type="text/javascript">
    $(function () {


        var data = { name: "123" };


        var data2 = $.extend(data, { init: "456" });
        console.log(data2);



        $("#form").templateRender({
            el: "tp-form",
            data: {
                Name: "无名",
                Pwd: 123,
                state: 3,
                inintSelect: [{ value: 1, text: "111" },
                    { value: 2, text: "222" }
                ],
                select:1
            }
        })
    })



    /*模板渲染*/
    $.fn.templateRender = function (opts) {
        var renderHtml = template(opts.el, opts.data);
        this.html(renderHtml);
        this.fadeIn();
    }


</script>